<template>
	<view id="list">
		<zb-dropdown-menu  style="width: 100%">
		  <zb-dropdown-item :options="option" v-model="queryParam.cycleEnum" @change="change1"></zb-dropdown-item>
		  <zb-dropdown-item :options="option2" v-model="queryParam.orderBy" @change="change2"></zb-dropdown-item>
		</zb-dropdown-menu>
		<view class="warn-content">
				<view class="warn-item" v-for="item in projectList" :key="item.projectId" @click="onDetail(item.projectId)">
					<u-cell-group :border="false">
						<u-cell :title="item.projectName"></u-cell>
					</u-cell-group>
					<u-grid col="2">
						<u-grid-item>
							<view class="item-1">
								扬尘：{{item.ycCnt}}
							</view>
						</u-grid-item>
						<u-grid-item>
							<view class="item-1">
								噪声：{{item.zsCnt}}
							</view>
						</u-grid-item>
						<u-line></u-line>
						<u-grid-item>
							<view class="item-1">
								裸土未覆盖：{{item.ltCnt}}
							</view>
						</u-grid-item>
						<u-grid-item>
							<view class="item-1">
								车辆未冲洗：{{item.cxCnt}}
							</view>
						</u-grid-item>
					</u-grid>
				</view>
		</view>
	</view>
</template>

<script>
	import { getWarnCnt } from '@/api/warn'
	export default {
		data () {
			return {
				queryParam: {
					reasonable: false,
					pageNum: 1,
					cycleEnum: 'TODAY',
					orderBy: ''
				},
				option: [
					{
						text: '日',
						value: 'TODAY'
					},
					{
						text: '周',
						value: 'WEEK'
					},
					{
						text: '月',
						value: 'MONTH'
					}
				],
				option2: [
					{
						text: '排序',
						value: ''
					},
					{
						text: '扬尘正序',
						value: 'yc_cnt asc'
					},
					{
						text: '扬尘倒序',
						value: 'yc_cnt desc'
					},
					{
						text: '噪声正序',
						value: 'zs_cnt asc'
					},
					{
						text: '噪声倒序',
						value: 'zs_cnt desc'
					},
					{
						text: '裸土未覆盖正序',
						value: 'lt_cnt asc'
					},
					{
						text: '裸土未覆盖倒序',
						value: 'lt_cnt desc'
					},
					{
						text: '车辆未冲洗正序',
						value: 'cx_cnt asc'
					},
					{
						text: '车辆未冲洗倒序',
						value: 'cx_cnt desc'
					}
				],
				projectList: []
			}
		},
		mounted () {
			this.getCnt()
		},
		methods: {
			getCnt () {
				const app = this
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				getWarnCnt(app.queryParam).then(res => {
					if (res.data.code === 200) {
						const data = res.data.rows
						if (data.length > 0) {
							app.projectList = app.projectList.concat(data)
						} else {
							uni.$u.toast('没有更多数据')
						}
						uni.hideLoading()
					} else {
						uni.$u.toast('稍后再试')
						uni.hideLoading()
					}
				})
			},
			onReachBottom() {
				this.queryParam.pageNum++
				this.getCnt()
			},
			onPullDownRefresh() {
				this.projectList = []
				this.queryParam.pageNum = 1
				this.getCnt()
				uni.stopPullDownRefresh()
			},
			change1 (item) {
				this.projectList = []
				this.getCnt()
			},
			change2 (item) {
				// if (item.value === '') {
				// 	delete this.queryParam['orderBy']
				// 	delete this.queryParam['isAsc']
				// 	this.queryParam.sort = ''
				// } else {
				// 	const field = item.value.split('-')
				// 	this.queryParam['orderBy'] = field[0]
				// 	this.queryParam['isAsc'] = field[1]
				// }
				this.projectList = []
				this.getCnt()
				// this.getCnt()
			},
			onDetail (id) {
				uni.navigateTo({
					url: '/packageE/warn/warndetail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#list {
		font-size: 24upx;
		background-color: $uni-bg-color-grey;
		.warn-content {
			padding: 20upx;
			.warn-item {
				border-radius: 15upx;
				background-color: #fff;
				margin-bottom: 20upx;
				.item-1 {
					padding: 30upx 0;
				}
			}
		}
	}
</style>
